<template>
  <div class="base_setting">
    <div class="first_block">
      <el-row :gutter="20">
        <el-col :span="3">活动名称：</el-col>
        <el-col :span="8">
          <el-input type="text" v-model.trim="baseSetting.sceneName"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">活动区域：</el-col>
        <el-col :span="8">
          <city v-model="area" :key="updateKey" :level="2"></city>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">行业：</el-col>
        <el-col :span="8">
          <el-select v-model="baseSetting.industry" placeholder="请选择">
            <el-option
              v-for="item in industryList"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <div class="second_block">
      <el-row :gutter="20">
        <el-col :span="3">开放互动：</el-col>
        <el-col :span="20">
          <el-switch v-model="baseSetting.huDong" :active-color="activeColor" :inactive-color="inactiveColor"></el-switch>
          <span class="tip">如果关闭此项，观众进入互动小程序后，只能看到欢迎页，无法参与活动。</span>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="line-height:40px">
        <el-col :span="3">互动加密：</el-col>
        <el-col :span="8">
          <el-switch v-model="baseSetting.needPwd" :active-color="activeColor" :inactive-color="inactiveColor"></el-switch>
          <el-input
            v-show="baseSetting.needPwd"
            v-model="baseSetting.huDongPwd"
            class="encrypt_input"
            type="text"
            placeholder="观众参与活动的密码"
          ></el-input>
        </el-col>
      </el-row>
    </div>
    <el-divider></el-divider>
    <div class="third_block">
      <el-row :gutter="20">
        <el-col :span="3">默认背景：</el-col>
        <el-col :span="10">
          <el-image :src="baseSetting.defaultBg" style="width:calc(100% - 80px)">
            <div slot="placeholder" class="image-slot">
              加载中
              <span class="dot">...</span>
            </div>
          </el-image>
          <el-button style="float:right" type="text" @click="picLibraryVisibly = true">背景库</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">屏幕比例：</el-col>
        <el-col :span="18">
          <el-radio-group v-model="baseSetting.screenScale">
            <el-radio label="16:9">16：9（默认）</el-radio>
            <el-radio label="4:3">4：3</el-radio>
            <el-radio label="3">
              自定义&nbsp;&nbsp;
              长：
              <el-input-number
                v-model="baseSetting.screenWidth"
                :disabled="baseSetting.screenScale !== '3'"
                controls-position="right"
                :min="0"
              ></el-input-number>&nbsp;&nbsp;
              宽：
              <el-input-number
                v-model="baseSetting.screenHeight"
                :disabled="baseSetting.screenScale !== '3'"
                controls-position="right"
                :min="0"
              ></el-input-number>
            </el-radio>
          </el-radio-group>
          <p class="tip">一般大屏都是16:9，如果不清楚请不要随便修改此项，会导致素材位置错乱。</p>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">默认特效：</el-col>
        <el-col :span="12">
          <el-radio-group v-model="baseSetting.defaultSpecial">
            <el-radio label="1">无特效（默认）</el-radio>
            <el-radio label="2">离子</el-radio>
            <el-radio label="3">舞动</el-radio>
            <el-radio label="4">荧光</el-radio>
          </el-radio-group>&nbsp;&nbsp;&nbsp;&nbsp;
          <el-button type="text" @click="sfxLibraryVisibly = true">特效库</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">活动logo：</el-col>
        <el-col :span="10">
          <el-image :src="baseSetting.logo" style="width:50%">
            <div slot="placeholder" class="image-slot">
              加载中
              <span class="dot">...</span>
            </div>
          </el-image>
          <div style="display:inline-block;float:right">
            <el-tooltip class="item" effect="dark" content="左上" placement="top-end">
              <el-button type="primary" icon="el-icon-top-left" circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="中上" placement="top">
              <el-button type="primary" icon="el-icon-top" circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="右上" placement="top-start">
              <el-button type="primary" icon="el-icon-top-right" circle></el-button>
            </el-tooltip>

            <br />
            <br />
            <el-tooltip class="item" effect="dark" content="左" placement="left-start">
              <el-button type="primary" icon="el-icon-back" circle></el-button>
            </el-tooltip>

              <el-button type="primary" icon="el-icon-edit" circle></el-button>

            <el-tooltip class="item" effect="dark" content="右" placement="right">
              <el-button type="primary" icon="el-icon-right" circle></el-button>
            </el-tooltip>
            <br />
            <br />
            <el-tooltip class="item" effect="dark" content="左下" placement="bottom-end">
              <el-button type="primary" icon="el-icon-bottom-left" circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="中下" placement="bottom">
              <el-button type="primary" icon="el-icon-bottom" circle></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="右下" placement="bottom-start">
              <el-button type="primary" icon="el-icon-bottom-right" circle></el-button>
            </el-tooltip>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">欢迎语：</el-col>
        <el-col :span="10">
          <el-input type="textarea" autosize placeholder="请输入内容" v-model="welcomeWords"></el-input>
          <span class="tip">欢迎语会显示在大屏幕的等待页面和互动小程序的加载页面</span>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">背景音乐：</el-col>
        <el-col :span="10">
          <el-select v-model="defaultMusic" placeholder="请选择" multiple :collapse-tags="true">
            <el-option
              v-for="item in musicList"
              :key="item.key"
              :label="item.name"
              :value="item.key"
            ></el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="3">菜单样式：</el-col>
        <el-col :span="16">
          <el-radio-group v-model="baseSetting.menuStyle">
            <el-radio
              v-for="item in menuStyleList"
              :label="item.key"
              :key="item.key"
            >{{ item.name }}</el-radio>
          </el-radio-group>
        </el-col>
      </el-row>
    </div>
    <div class="foot_btn">
      <el-button @click="reset">恢复默认</el-button>
      <el-button type="primary" @click="saveSetting">保 存</el-button>
    </div>
    <modal :visible="picLibraryVisibly" :width="800" title="图片库" @close="picLibraryVisibly = false">
      <imagesLibrary @selected="selectCurrent"></imagesLibrary>
    </modal>
    <modal :visible="sfxLibraryVisibly" :width="800" title="特效库" @close="sfxLibraryVisibly = false">
      <specialLibrary @selected="selectCurrent"></specialLibrary>
    </modal>
  </div>
</template>

<script>
import modal from '@/pages/common/modal';
import city from '@/pages/common/city';
import imagesLibrary from './library/imagesLibrary';
import specialLibrary from './library/specialLibrary';
export default {
    name: 'baseSetting',
    components: {
        modal,
        city,
        imagesLibrary,
        specialLibrary,
    },
    data() {
        return {
            activeColor: this.$styleVariables.activeSwitch,
            inactiveColor: this.$styleVariables.inactiveSwitch,
            setWelcome: '',
            area: '',
            sceneName: '',
            sceneId: '',
            defaultMusic: '',
            defaultSetting: {
                sceneName: '',
                huDong: true,
                needPwd: false,
                industry: '0',
                screenScale: '16:9',
                scaled: 0, // 0 非用户自定义   1 用户自定义
                screenWidth: '',
                screenHeight: '',
                defaultBg:
                    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                logo:
                    'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
                defaultSpecial: '1',
                welcomeWords: '',
                defaultMusic: '',
                menuStyle: '1',
                huDongPwd: '',
                area: '',
            },
            baseSetting: {},

            industryList: [
                { value: '请选择', key: '0' },
                { value: 'IT', key: '1' },
                { value: '医药/医疗', key: '12' },
                { value: '新能源', key: '13' },
                { value: '地产', key: '14' },
                { value: '食品', key: '33' },
                { value: '金融', key: '35' },
                { value: '制造业', key: '37' },
                { value: '体育', key: '43' },
                { value: '展会/展览', key: '44' },
                { value: '婚庆/婚礼', key: '52' },
                { value: '化妆/时尚', key: '53' },
                { value: '教育/培训', key: '54' },
                { value: '商超/零售', key: '57' },
                { value: '公关', key: '58' },
                { value: '汽车', key: '59' },
                { value: '协会/组织', key: '60' },
                { value: '酒类行业', key: '61' },
                { value: '家居', key: '62' },
                { value: '其他', key: '63' },
            ],
            musicList: [
                { name: '音乐1', key: '1' },
                { name: '音乐2', key: '2' },
                { name: '音乐3', key: '3' },
                { name: '音乐4', key: '4' },
            ],
            menuStyleList: [
                { name: '黑白百搭（默认）', key: '1' },
                { name: '奢华金', key: '2' },
                { name: '富贵红', key: '3' },
                { name: '贵族紫', key: '4' },
            ],
            picLibraryVisibly: false,
            sfxLibraryVisibly: false,
            updateKey: '0',
        };
    },
    created() {
        this.sceneId = this.$route.query.sceneId;
        this.fetchSetting();
    },
    methods: {
        fetchSetting() {
            this.$api.get(
                '/st_scene/query',
                { sceneId: this.sceneId },
                res => {
                    var setting = JSON.parse(
                        JSON.stringify(this.defaultSetting)
                    );
                    // 过滤空配置
                    for (const item in res) {
                        if (res[item] == null || res[item] === '') {
                            delete res[item];
                        }
                    }
                    // 扩展默认配置
                    if (res.defaultMusic) {
                        this.defaultMusic = res.defaultMusic.split(',');
                    }
                    if (res.area) {
                        this.area = res.area.split(',');
                    }
                    // 如果用户保存过，不再自动生成欢迎语
                    if (res.welcomeWords) {
                        this.setWelcome = res.welcomeWords;
                    }

                    this.baseSetting = _.extend(setting, res);
                    this.sceneName = res.sceneName;
                    this.updateKey = '1';
                    console.log('this.baseSetting :', this.baseSetting);
                },
                err => {
                    this.$message.error('初始化设置失败！');
                }
            );
        },
        saveSetting() {
            // 音乐本地存储为数组，后台为字符串
            this.baseSetting.defaultMusic = this.defaultMusic.toString();
            this.baseSetting.area = this.area.toString();
            // 判断是否为用户自定义尺寸
            if (this.baseSetting.screenScale === '3') {
                this.baseSetting.scaled = 1;
            }
            
            this.baseSetting.welcomeWords = this.welcomeWords;
            this.$api.post(
                '/st_scene/update',
                this.baseSetting,
                res => {
                    this.$message.success('保存成功');
                },
                err => {
                    this.$message.error('保存失败');
                }
            );
        },
        reset() {
            this.baseSetting = JSON.parse(JSON.stringify(this.defaultSetting));
            this.baseSetting.sceneName = this.sceneName;
        },
        selectCurrent(data) {
            console.log(data);
        },
    },
    computed: {
        // 自动生成欢迎语
        welcomeWords: {
            get() {
                return (
                    this.setWelcome ||
                    `欢迎${this.area ? `来到${this.area}` : ''}参加${
                        this.baseSetting.sceneName
                    }`
                );
            },
            set(val) {
                this.setWelcome = val;
            },
        },
    },
};
</script>

<style lang="scss" scoped>
.base_setting {
    width: 100%;
    .el-row {
        padding: 10px 0;
        .el-col-3 {
            white-space: nowrap;
            text-align: right;
        }
    }
    .encrypt_input {
        width: calc(100% - 45px);
    }
    .tip {
        font-size: 12px;
        color: #999;
        line-height: 30px;
    }
    .foot_btn {
        padding: 20px 20px 10px 200px;
    }
}
</style>